<template>
  <div class="login">
    <div style="padding-top: 20%;padding-left: 30%;">
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"> 用户名：<el-input style="width:80%" v-model="login.username" placeholder="请输入内容"></el-input><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8">    密码：&nbsp;&nbsp;&nbsp;<el-input style="width:80%" type="password" v-model="login.password" placeholder="请输入内容"></el-input><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8">    <br>
          <el-button @click="loginClick">登录</el-button><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>



  </div>
</template>

<script>
import {login} from "../api/blog";

export default {
  name: "Login",
  data(){
    return{
      login:{
        username:"ganggang",
        password:"123456"
      }
    }
  },
  methods:{
    loginClick(){
      sessionStorage.clear()
      login(this.login).then(res=>{
        if (res.data.code === 200){
          console.log(res)
          this.$store.commit("SET_TOKEN",res.data.data.token)
          sessionStorage.setItem("access_token",res.data.data.access_token)
          this.$store.commit("SET_USERINFO",res.data.data.userInfo)
          this.$router.push("/blogs")
        }

      })
    }
  }
}
</script>

<style scoped>
.login{
  position: absolute;
  background: url("../assets/image/backgrount.jpg");
  width: 100%;
  height: 100%;
}
</style>